<template>
  <div class="bookEnd">
    <main>
      <header>
        <h2>{{ writingProcess | writingProcessTxt }}</h2>
        <el-button @click="downDialog = true" class="download-btn"
          >Download Fishnovel APP</el-button
        >
      </header>
      <ul class="list">
        <h3 class="title">Maybe You Like</h3>
        <list-template
          v-for="item of list"
          :key="item.bookId"
          :item="item"
          :diff="'rankings-list'"
        />
      </ul>
      <!-- 侧边栏按钮 -->
      <ul class="tools tools-right">
        <li @click="toPage('reader')">Previous</li>
        <li class="goHome" @click="toPage('home')">Home</li>
      </ul>
    </main>
    <el-dialog :visible.sync="downDialog">
      <div class="down-dialog">
        <h2>Download FishNovel App</h2>
        <p class="down-desc">
          Discover much more brilliant stories in FishNovel App!
        </p>
        <ul class="foot-down">
          <li class="apple-li" @click="toDownloadUrl('apple')">
            <svg-icon icon-class="appleIcon"></svg-icon>
            <span>Apple Store</span>
          </li>
          <li class="google-li" @click="toDownloadUrl('google')">
            <svg-icon icon-class="googleIcon"></svg-icon>
            <span>Google Play</span>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import listTemplate from "@/components/common/listTemplate/Index";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      bookId: this.$route.params.bookId, //书籍ID
      writingProcess: this.$route.params.writingProcess, //书籍状态
      list: [], //书籍末尾推荐列表
      downDialog: false, //下载弹窗
    };
  },
  components: {
    listTemplate,
  },
  filters: {
    // 过滤写作进程
    writingProcessTxt(code) {
      let list = {
        0: "To Be Continued",
        1: "The End",
        2: "To Be Continued",
      };
      return list[code];
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.bookLastRecommend();
  },
  methods: {
    ...mapMutations({
      // setShowPopup: "SET_SHOW_POPUP",
      setCurrentDialog: "SET_CURRENT_DIALOG",
    }),
    async bookLastRecommend() {
      try {
        let res = await this.$api.reader.bookLastRecommend({
          bookId: this.bookId,
        });
        if (res.code === 1) {
          this.list = res.source;
        }
      } catch (e) {
        console.log(e);
      }
    },
    //跳转页面
    toPage(name) {
      if (name === "reader") {
        this.$router.back(-1);
      } else {
        this.$router.push({ name });
      }
    },
    toDownloadUrl(str) {
      // this.downDialog = false;
      if (str === "google") {
        window.open(
          "https://play.google.com/store/apps/details?id=com.youhe.fishoverseas",
          "_blank"
        );
      } else if (str === "apple") {
        window.open(
          "https://apps.apple.com/US/app/id1601600834?mt=8",
          "_blank"
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bookEnd {
  width: 100%;
  min-height: 100vh;
  padding: 48px 0;
  box-sizing: border-box;
  background: #f5f5f5;
  main {
    width: 1000px;
    margin: auto;
    border-radius: 16px;
    background: #ffffff;
    position: relative;
    header {
      padding: 53px 0;
      text-align: center;
      > h2 {
        font-size: 22px;
        font-family: Poppins-SemiBold, Poppins;
        font-weight: 600;
        color: #000000;
        line-height: 37px;
      }
      .download-btn {
        width: 320px;
        height: 50px;
        color: #fff;
        font-size: 20px;
        margin-top: 20px;
        border-radius: 6px;
        background: #e86472;
      }
    }
    > ul.list {
      padding: 0 32px 7px;
      > h3.title {
        margin: 23px 0;
        font-size: 24px;
        font-family: Poppins-SemiBold, Poppins;
        color: #000000;
        line-height: 40px;
      }
      .list-template {
        height: 180px;
      }
    }
    .tools {
      margin: 0 8px;
      position: absolute;
      top: 121px;
      li {
        width: 120px;
        height: 42px;
        cursor: pointer;
        margin-bottom: 24px;
        text-align: center;
        white-space: nowrap;
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #cccccc;
        font-size: 16px;
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        color: #000000;
        line-height: 42px;
        &.goHome {
          color: #fff;
          background: #e86472;
        }
      }
      &.tools-right {
        left: 100%;
      }
    }
  }
  // Dialog弹窗内容样式
  ::v-deep .el-dialog {
    width: 536px;
    border-radius: 16px;
    .el-dialog__header {
      .el-dialog__close {
        color: #000;
        font-weight: bold;
      }
    }
    .el-dialog__body {
      .down-dialog {
        text-align: center;
        > h2 {
          font-size: 22px;
          font-family: Poppins-Medium, Poppins;
          font-weight: 500;
          color: #000000;
          line-height: 37px;
        }
        > p.down-desc {
          font-size: 16px;
          margin-top: 41px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 22px;
        }
        > .foot-down {
          margin-top: 58px;
          display: flex;
          align-items: center;
          flex-direction: column;
          li {
            width: 280px;
            height: 48px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-size: 16px;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #ffffff;
            &.apple-li {
              background: #000000;
            }
            &.google-li {
              margin-top: 19px;
              background: #5799ff;
            }
            .svg-icon {
              width: 18px;
              height: 22px;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
  // > header {
  //   padding: 45px 15px 96px 15px;
  //   display: flex;
  //   align-items: center;
  //   flex-direction: column;
  //   font-weight: 600;
  //   font-size: 42px;
  //   color: #333333;
  //   .back {
  //     width: 100%;
  //     display: block;
  //     text-align: left;
  //     margin-bottom: 56px;
  //     .svg-icon {
  //       width: 56px;
  //       height: 56px;
  //     }
  //   }
  //   .download-btn {
  //     width: 596px;
  //     height: 100px;
  //     margin-top: 24px;
  //     font-size: 34px;
  //     color: #ffffff;
  //     border-radius: 20px;
  //     background: #e86472;
  //   }
  // }
  // > .main {
  //   padding: 0 40px;
  //   > h3.title {
  //     font-size: 32px;
  //     color: #333333;
  //     margin-bottom: 24px;
  //     line-height: 53px;
  //   }
  // }
}
</style>
